<div id="content_header">
  <h3>Register a new city</h3>
</div>
<div class="row">
  <div class="col-md-6 col-lg-4">
    <form name="cityForm" role="form" ng-submit="addCity()">

      <div class="form-group" ng-class="{ 'has-error': errors.Name}">
        <label class="required" for="Name">City Name</label>
        <span class="error" ng-show="cityForm.Name.$error.required">Required!</span>
        <input type="text" name="Name" class="form-control" id="Name" placeholder="Input field" ng-model="cityNew.Name" required>
        <error-widget field="errors.Name"></error-widget>
      </div>

      <!-- <div class="form-group" ng-class="{ 'has-error': errors.FullName}">
        <label class="required" for="country">Country</label>
        <select name="" class="form-control" id="" ng-model="cityNew.CountryID" ng-options="country.CountryName for country in countries" required>
          <option value="" ng-hide="cityNew.CountryID">Select a country.</option>
        </select>
        <error-widget field="errors.FullName"></error-widget>
      </div> -->

      <div class="form-group" ng-class="{ 'has-error': errors.Province}">
        <label class="required" for="province">Provinces</label>
        <select name="" class="form-control" id="" ng-model="cityNew.Province.Id" ng-options="province.Id as province.Name for province in provinces" required>
          <option value="" ng-hide="cityNew.Province.Id">Select a province.</option>
        </select>
        <error-widget field="errors.Province"></error-widget>
      </div>

      <button type="submit" class="btn btn-primary" >Submit</button>
    </form>
  </div>
</div>